<template>
  <view class="container" :style="{ height: height + 'px' }">
    <view class="container_form">
      <view class="input-form" @click="showPicker = true">
        <view>供应商</view>
        <u-line direction="col" color="#888888" length="20rpx" margin="10rpx 20rpx"></u-line>
        <view class="fl1"><u-input placeholder="请输入内容" border="none" v-model="params.customerName" @change="change" readonly></u-input></view>
      </view>
      <view class="flex" style="margin-top: 20rpx">
        <view class="input-form" @click="showUserPicker = true">
          <view>入库仓库</view>
          <u-line direction="col" color="#888888" length="20rpx" margin="10rpx 20rpx"></u-line>
          <view class="fl1"><u-input placeholder="请选择" border="none" v-model="params.warehouseName" @change="change" readonly></u-input></view>
        </view>
        <button class="add-client" @click="addGood">新增</button>
      </view>
    </view>
    <!-- v-for="(item, index) in params.detailList" :key="index" -->
    <view class="item-wrap" @click="goDetail(item)">
      <view class="head">
        <view class="icon">
          <image src="/static/image/defaultGoods.png" mode="widthFix" />
        </view>
        <view class="right">
          <view>名称</view>
          <view>名称</view>
        </view>
      </view>

      <view class="detail-wrap">
        <view>
          <view class="label">规格</view>
          <view class="name">{{ item.warehouseName }}</view>
        </view>
        <view>
          <view class="label">数量</view>
          <view class="name">{{ item.count }}</view>
        </view>
        <view>
          <view class="label">箱数</view>
          <view class="name">{{ item.goodsCount }}</view>
        </view>
        <view>
          <view class="label">单价</view>
          <view class="name">{{ item.boxCount }}</view>
        </view>
        <view>
          <view class="label">箱价</view>
          <view class="name">{{ item.boxCount }}</view>
        </view>
      </view>
      <view class="price"
        >金额：<text class="single-price">{{ item.supplierName }}</text></view
      >
    </view>

    <view class="bottom">
      <view class="total-price">
        <view>数量合计：1件</view>
        <view>金额合计</view>
      </view>
      <view class="bottom-btn">
        <button class="btn back" @click="submit">保存</button>
        <button class="btn" @click="examine">审批</button>
      </view>
    </view>
    <u-picker :show="showPicker" :columns="customList" keyName="name" @confirm="confirm" @cancel="showPicker = false"></u-picker>
    <u-picker :show="showUserPicker" :columns="warehouseList" keyName="name" @confirm="userConfirm" @cancel="showUserPicker = false"></u-picker>
  </view>
</template>

<script>
import { getUserInfo, curTime } from '@/service/auth'

import { expenseApply, expenseApplyExamine, expenseDetail } from '@/service/api/pay'
import { getbasCustomerList } from '@/service/api/shopping'
import { getSysUserList, getBasWarehouseList } from '@/service/api/logistics'
import leeDatetime from '@/components/lee-datetime'

export default {
  components: {},
  data() {
    return {
      params: {
        customerName: '',
        warehouseName: '',
        warehouseId: '',
        taxAmount: 0,
        detailList: [],
      },
      rules: {
        userName: {
          type: 'string',
          required: true,
          message: '',
          trigger: ['blur', 'change'],
        },
      },
      type:'buyApply',
      customList: [],
      showPicker: false,
      showUserPicker: false,
      itemDetail: {},
      userList: [],
      warehouseList: [],
    }
  },
  onReady() {},

  onShow() {
    // uni.$on('refreshCustomerData', res => {
    //   if (res.refresh) {
    //     this.customList = []
    //     this.getCustomerList()
    //   }
    // })
  },
  onLoad(options) {
    if (options.id) {
      let itemId = options.id
      this.getDetail(itemId)
    } else {
      this.params.createTime = curTime()
      this.user = getUserInfo()
      this.params.userName = this.user.userName
      this.params.deptName = this.user.deptName
      this.params.deptId = this.user.deptId
    }
    this.getCustomerList()
    this.getWareHouseList()
  },
  computed: {},
  methods: {
    startDateChange(e) {
      this.params.createTime = e.value
    },
    confirm(e) {
      console.log('confirm', e)
      this.params.customerName = e.value[0].name
      this.params.customerId = e.value[0].id
      this.showPicker = false
    },
    userConfirm(e) {
      console.log('userConfirm', e)
      this.params.warehouseName = e.value[0].name
     
      this.params.warehouseId = e.value[0].id

      this.showUserPicker = false
    },
    getDetail(itemId) {
      const _this = this
      uni.showLoading()
      expenseDetail({ id: itemId })
        .then(res => {
          uni.hideLoading()
          _this.itemDetail = res.data.order
          _this.params.customerName = _this.itemDetail.customerName
          _this.params.customerId = _this.itemDetail.customerId
          _this.params.userName = _this.itemDetail.userName
          _this.params.userId = _this.itemDetail.userId
          _this.params.deptName = _this.itemDetail.deptName
          _this.params.deptId = _this.itemDetail.deptId
          _this.params.createTime = _this.itemDetail.createTime
          _this.params.taxAmount = _this.itemDetail.taxAmount
          _this.params.detailList = _this.itemDetail.detailList
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    getCustomerList() {
      const _this = this
      uni.showLoading()
      getbasCustomerList({ page: 1, size: 999 })
        .then(res => {
          uni.hideLoading()
          _this.customList.push(res.content)
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    getWareHouseList() {
      getBasWarehouseList({})
        .then(res => {
          if (res.content.length) {
            this.warehouseList.push(res.content)
          }
        })
        .catch(err => {
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    getUserList() {
      const _this = this
      getSysUserList()
        .then(res => {
          _this.userList.push(res.content)
        })
        .catch(err => {
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    submit() {
      uni.showLoading({ title: '提交中' })
      if (this.params.detailList.length == 0) {
        uni.showToast({
          title: '请先新增费用',
          icon: 'none',
        })
        return
      }
      expenseApply(this.params)
        .then(res => {
          uni.hideLoading()
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
          uni.$emit('refreshCostData', { refresh: true })
          uni.navigateBack({
            delta: 1,
          })
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    examine() {
      uni.showLoading({ title: '提交中' })
      if (this.params.detailList.length == 0) {
        uni.showToast({
          title: '请先新增费用',
          icon: 'none',
        })
        return
      }
      expenseApplyExamine(this.params)
        .then(res => {
          uni.hideLoading()
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
          uni.$emit('refreshCostData', { refresh: true })
          uni.navigateBack({
            delta: 1,
          })
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    addSub() {
      const _this = this
      uni.navigateTo({
        url: `/packagePurchase/pages/cost/addSubExpense`,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: function (data) {
            if (data.data) {
              _this.params.detailList = _this.params.detailList.concat(data.data)
              _this.params.detailList.forEach(item => {
                _this.params.taxAmount = parseInt(item.taxAmount) + parseInt(_this.params.taxAmount)
              })
            }
          },
        },
      })
    },
    addCustomer() {
      uni.navigateTo({
        url: `/packagePurchase/pages/record/addCustomer`,
      })
    },
    addGood() {
      uni.navigateTo({ url: `/packagePurchase/pages/shopping/index?customer=${JSON.stringify({customerId:this.params.customerId,customerName:this.params.customerName})}&params=${JSON.stringify({ type: 'BUY' })}&type=${this.type}` })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f4f5f9;
  padding: 20rpx;
  font-size: 28rpx;
  height: 100vh;
  &_form {
    padding: 0 20rpx;
    .input-form {
      display: flex;
      align-items: center;
      padding: 10rpx 20rpx;
      border-radius: 50rpx;
      background-color: white;
      font-size: 26rpx;
    }
    .add-client {
      background-color: #2f6fef;
      border-radius: 50rpx;
      color: white;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 26rpx;
    }
  }
  .item-wrap {
    background-color: white;
    border-radius: 10rpx;
    margin: 20rpx 20rpx 0;
    padding: 20rpx;
    .head {
      display: flex;
      .icon {
        width: 70rpx;
        image {
          width: 100%;
        }
      }
    }
    .right {
      margin-left: 10rpx;
    }
    .client {
      font-weight: bold;
      font-size: 30rpx;
      margin: 10rpx 0;
    }
    .detail-wrap {
      display: flex;
      text-align: center;
      justify-content: space-around;
      margin: 10rpx 0;
      background-color: #f4f5f9;
      padding: 10rpx 0;
      .label {
        font-size: 26rpx;
        color: #888;
      }
    }
    .price {
      text-align: right;
      .single-price {
        color: #ff8324;
      }
    }
  }
  .bottom {
    position: absolute;
    height: 150rpx;
    bottom: 0;
    background-color: white;
    left: 0;
    right: 0;
    font-size: 28rpx;
    .total-price {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 20rpx 0;
    }
    .bottom-btn {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      .btn {
        background-color: #2f6fef;
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        color: white;
        border-radius: 50rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        font-size: 28rpx;
      }
      .back {
        background-color: white;
        color: #2f6fef;
        border: 1rpx solid #2f6fef;
      }
    }
  }
}

::v-deep .u-form-item__body__left {
  width: 150rpx !important;
}
</style>
